<template>
  <div class="app-container">
    <!--顶部课程种类信息-->
    <el-row class="head">
      <span>编号:{{ course.courseId }}</span>
      <span>学分:{{ course.credit }}</span>
      <span>课时:{{ course.periods }}</span>
      <span>名称:{{ course.courseName }}</span>
      <span>备注:{{ course.notes }}</span>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="3">
        <!--侧边课程种类信息-->
        <el-form>
          <el-form-item>
            <el-image class="img" :src="course.headImg" fit="full">
              <div slot="error" class="image-slot">
                <el-image :src="defaultImg" fit="full"></el-image>
              </div>
            </el-image>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="primary" @click="Gohome"
              >返回</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="primary" plain @click="upCourse"
              >修改课程</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn btn1"
              :class="[sidebarType === 1 ? 'btn_active' : '']"
              plain
              @click="lessonManage"
              >授课班级管理</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn btn1"
              :class="[sidebarType === 2 ? 'btn_active' : '']"
              plain
              @click="topicManage"
              >题目类型管理</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn btn1"
              :class="[sidebarType === 3 ? 'btn_active' : '']"
              plain
              @click="annexManage"
              >附件类型管理</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <!--工具栏-->
      <el-col :span="21">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
        >
          <el-form-item>
            <el-input
              v-model="form.seacherValue"
              :placeholder="form.placeholder"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              >新增</el-button
            >
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              >修改</el-button
            >
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              >删除</el-button
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>

        <el-table ref="dataTable" v-loading="loading" :data="form.data" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column :label="form.id" prop="id" width="170" />
          <el-table-column :label="form.name" prop="name" :show-overflow-tooltip="true" width="170"/>
          <el-table-column v-if="sidebarType===1" label="学期" prop="semester" width="170" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope" v-if="scope.row.roleId !== 1">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="viewTeaching(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--分页组件-->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTeachingList"
        />
      </el-col>
    </el-row>
    <el-dialog
      :title="flag === 0 ? '新增教学班级' : '教学班级详情'"
      :visible.sync="addTeachingBtn"
    >
      <el-form :model="currentClass">
        <el-form-item label="教学班级编号" v-show="flag == 1">
          <el-input v-model="currentClass.classId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="教学班级名称">
          <el-input
            v-model="currentClass.className"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="教学班级备注">
          <el-input
            v-model="currentClass.describe"
            autocomplete="off"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTeachingBtn = false">取消</el-button>
        <el-button v-show="flag == 0" type="primary" @click="addClass"
          >新增</el-button
        >
        <el-button v-show="flag == 1" type="primary" @click="updateClass"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <upCourse
      :upCourseBtn="upCourseBtn"
      :course="course"
      @offUpCourse="offUpCourse"
    ></upCourse>
  </div>
</template>

<script>
import addTeaching from "../teaching/addTeaching/index.vue";
import upCourse from "@/views/system/course/upCourse.vue";
import course_cover from "../../../assets/images/course-cover.png";
import { getCourse,getLessonByCourse } from "@/api/system/course";
import { parseTime } from "@/utils/ruoyi";
import {getAttachmentTypeListByCourse} from "@/api/attachmentType"
import {gettopicTypeListByCourse} from "@/api/topicType"
import { addLesson, getLesson, deleteLesson, updateLesson, } from "@/api/system/lesson";
export default {
  components: { upCourse, addTeaching },
  data() {
    return {
      flag: 0, //flag为0是为新增题目，为1时为编辑题目
      //课程信息
      course: {
        courseId: null,
        courseName: null,
        credit: null, //学分
        periods: null, //课时
        notes: null, //备注
        headImg: null, //封面
      },
      //当前授课班级的信息
      currentClass: { classId: "", className: "", describe: "" },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
      },
      //默认图片
      defaultImg: course_cover,
      //修改课程表单开关
      upCourseBtn: false,
      //新增开授课程表单开关
      addTeachingBtn: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //边栏类型
      sidebarType: 1,
      //表单属性
      form: {
        placeholder: "请输入授课课程编号",
        seacherValue: '',
        data:[],
        name:'授课班级名称',
        id:'授课班级编号',
      },
    };
  },
  //创建实例运行
  created() {
    //获取课程种类编号
    this.course.courseId = this.$route.query.courseId;
  },
  //加载时运行
  mounted() {
    //获取课程种类数据
    this.getCourseData(this.course.courseId);
    //获取授课课程列表
    this.getTeachingList(this.course.courseId);
  },
  methods: {
    // 授课班级管理
    lessonManage() {
      this.sidebarType = 1;
      this.form.placeholder="请输入授课班级编号";
      this.form.name="授课班级名称";
      this.form.id="授课班级编号";
      this.getTeachingList(this.course.courseId);
    },
    //题目管理
    topicManage() {
      this.sidebarType = 2;
      this.form.placeholder="请输入题目类型";
      this.form.name="题目类型名称";
      this.form.id="题目类型编号";
      this.getTopicType(this.course.courseId);
    },
    // 附件管理
    annexManage() {
      this.sidebarType = 3;
      this.form.placeholder="请输入附件类型";
      this.form.name="附件类型名称";
      this.form.id="附件类型编号";
      this.getAnnexType(this.course.courseId);
    },
    //获取题目类型
    getTopicType(id){
      this.form.data=[];
      let temp={};
      gettopicTypeListByCourse(id).then((res)=>{
        res.data.forEach(item=>{
          temp={
            id:item.id??0,
            name:item.topicType,
          }
          this.form.data.push(temp)
        })
      })
    },
    // 获取附件类型
    getAnnexType(id){
      this.form.data=[];
      let temp={};
      getAttachmentTypeListByCourse(id).then((res)=>{
        res.data.forEach(item=>{
          temp={
            id:item.id??0,
            name:item.attachmentType,
          }
          this.form.data.push(temp)
        })
      })
    },
    /**关闭授课课程添加表单*/
    offTeachingDia(newValue) {
      this.addTeachingBtn = false;
    },
    /**获取授课课程列表*/
    getTeachingList(id) {
      this.form.data=[];
      let temp={};
      getLessonByCourse(id).then((res)=>{
        res.data.forEach(item=>{
          temp={
            id:item.lessonId,
            name:item.lessonName??'-',
            courseId:item.courseId,
            semester:item.semester,
            teacherId:item.teacherId,
            attachmentBtn:item.attachmentBtn,
            groupBtn:item.groupBtn,
            groupMax:item.groupMax,
            groupMin:item.groupMin,
          }
          this.form.data.push(temp);
        })
      })
    },
    parseTime,
    /**获取课程信息*/
    getCourseData(id) {
      getCourse(id).then((res) => {
        this.course = {
          courseId: res.data.courseId,
          courseName: res.data.courseName,
          credit: res.data.credit,
          periods: res.data.periods,
          notes: res.data.content,
          headImg: process.env.VUE_APP_BASE_API + res.data.headImg,
        };
      });
    },
    /**修改课程种类*/
    upCourse() {
      this.upCourseBtn = true;
    },
    /**返回课程管理首页*/
    Gohome() {
      this.$router.push({ path: "/system/course" });
    },
    /**多选框选中数据*/
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.roleId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 修改授课课程表单取消按钮
    cancel() {},
    /** 搜索按钮操作 */
    handleQuery() {
      this.total = 1;
      this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 重置查询参数到初始状态
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        id: null,
      };
      // 清空选中项数组
      this.ids = [];
      this.single = true;
      this.multiple = true;
      // 清空输入框内容
      this.form.seacherValue = null;
      // 显式清除表格的选中状态
      if (this.$refs.dataTable) {
        this.$refs.dataTable.clearSelection();
      }
      // 重新获取授课课程列表，显示所有数据
      this.getTeachingList(this.course.courseId);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.flag = 0;
      this.currentClass = { classId: "", className: "" };
      this.addTeachingBtn = true;
    },
    /**关闭修改课程对话框*/
    offUpCourse(newValue) {
      this.upCourseBtn = newValue.btn;
      //关闭时有修改成功和删除的关闭，若删除成功则返回课程管理首页
      if (newValue.isdel) {
        this.Gohome();
      } else {
        this.getCourseData(this.course.courseId);
      }
    },
    /** 查看按钮操作 */
    viewTeaching(row) {
      console.log("查看授课课程", row.id);
      this.$router.push({
        path: "/system/teaching/content",
        query: { teachingId: row.id, courseId: this.course.courseId },
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.flag = 1;
      this.currentClass = {
        classId: row.id, // 这里假设id是教学班级编号
        className: row.courseName, // 教学课堂名称
        describe: row.notes, // 备注信息
      };
      this.addTeachingBtn = true;
    },
    //未完成---------------------------------------------------------------------------------------
    addClass() {
      let data = {
        className: this.currentclass.className,
        describe: this.currentclass.describe,
      };
      addClass(data).then((res) => {
        //console.log(res);
        this.fetchClasss();
        this.addTeachingBtn = false;
      });
    },
    updateClass() {
      let data = {
        className: this.currentClass.className,
        classId: this.currentClass.classId,
        describe: this.currentClass.describe,
      };
      updateClass(data)
        .then((res) => {
          //console.log(res)
          this.addTeachingBtn = false;
          this.fetchClasses();
        })
        .catch((error) => {
          //console.error("Failed to save class:", error);
        });
    },
    deleteClasses() {
      this.selectedClasses.forEach((classId) => {
        deleteClass(classId).then(() => {});
      });
      this.fetchClasses();
      this.selectedClasses = [];
    },
    deleteClass(row) {
      deleteClass(row.classId).then(() => {
        this.fetchClasses();
      });
    },
    //-------------------------------------------------------------------------------------------------
    /** 删除按钮操作 */
    handleDelete(row) {},
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/role/export",
        {
          ...this.queryParams,
        },
        `role_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style scoped>
.head {
  display: flex;
  /* 使用Flexbox */
  margin-bottom: 2%;
  border-bottom: 1px solid #ccc;
  gap: 2%;
  /* 设置子元素之间的间隔为2% */
  align-items: flex-start;
  /* 让子元素垂直对齐到起点（flex-start） */
}

.btn {
  width: 100%;
}

.btn1 {
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn_active {
  border-color: rgb(68, 142, 247);
  /* 边框颜色变为蓝色 */
  color: rgb(68, 142, 247);
  /* 字体颜色变为蓝色 */
}

.img {
  width: 100%;
  border-radius: 3%;
  border: 1px solid rgb(198, 198, 201);
}
</style>
